<template>
  <div class="moudle_main">
    <div class="moudle_left moudle_warp">
      <LeftPanel />
    </div>

    <div class="moudle_right moudle_warp">
      <RightPanel />
    </div>

    <TimeLine @getStatus="getStatus" />
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick, watch, getCurrentInstance, onBeforeUnmount } from "vue";
import LeftPanel from './left/left.vue'
import RightPanel from './right/right.vue'
import TimeLine from '@/components/timeLine/timeLine.vue'
import { useTimeStore } from '@/store/index'
import { get729Time } from '@/components/timeLine/getTime'


const { appContext } = getCurrentInstance()
let global = appContext.config.globalProperties


import Effect1 from './senceEffect/effect1'
import Effect2 from './senceEffect/effect2'
import Effect3 from './senceEffect/effect3'
import { clearAll } from "./senceEffect/riverWater";

let effectObj1 = null
let effectObj2 = null
let effectObj3 = null

const timeStore = useTimeStore()

const timeData = reactive({
  timeList: get729Time(),
  typeIndexList: [0, 13, 17, 29, 39],
  effectTypeList: [0, 3, 7, 13, 17, 29, 39],
})

const effctObj = reactive({
  effectIndex: 0
})



const getStatus = (data) => {
}

watch(() => timeStore.timeValue, (newVal) => {
  if (newVal) {
    // 这里有坑  设计缺陷  default是指切换到默认  '7/29'是指第一次切换到7/29洪水  剩下的是时间轴上的值
    if (newVal === 'default') {

    } else if (newVal === '7/29') {
      getData(timeData.timeList[0].value)
    } else {
      getData(newVal)
    }
  }
}, { immediate: true })


const getData = (time) => {
  let index = 0
  for (let i = 0; i < timeData.timeList.length; i++) {
    if (timeData.timeList[i].value === time) {
      index = i
      break
    }
  }

  // let typeIndex = 0
  // if (index >= timeData.typeIndexList[timeData.typeIndexList.length - 1]) {
  //   typeIndex = timeData.typeIndexList.length
  // } else {
  //   for (let i = 0; i < timeData.typeIndexList.length; i++) {
  //     if (index >= timeData.typeIndexList[i] && index < timeData.typeIndexList[i + 1]) {
  //       typeIndex = i + 1
  //       break
  //     }
  //   }
  // }
  changeEffectIndex(index)
}

const changeEffectIndex = (index) => {
  let effectIndex = 0
  if (index >= timeData.effectTypeList[timeData.effectTypeList.length - 1]) {
    effectIndex = timeData.effectTypeList.length
  } else {
    for (let i = 0; i < timeData.effectTypeList.length; i++) {
      if (index >= timeData.effectTypeList[i] && index < timeData.effectTypeList[i + 1]) {
        effectIndex = i + 1
        break
      }
    }
  }

  if (effctObj.effectIndex === effectIndex) {
    return
  }
  effctObj.effectIndex = effectIndex
  switch (effectIndex) {
    case 1:
      if (effectObj1) {
        // //从状态2切回状态1  需要清除下雨
        effectObj1.clear()
        return
      }
      effectObj1 = new Effect1(global.$viewer)
      break;
    case 2:
      effectObj1.start2()
      break;
    case 3:
      effectObj1.start3()
      break;
    case 4:
      //清除下雨
      effectObj1 && effectObj1.clear()
      effectObj3 && effectObj3.clearTimer()
      if (effectObj2) return
      effectObj2 = new Effect2(global.$viewer)
      // changeRiverShow(true)
      break;
  }
}

const clearAllEffct = () => {
  effectObj1 && effectObj1.clear()
  effectObj2 && effectObj2.clear()
  effectObj3 && effectObj3.clear()

}

onBeforeUnmount(() => {
  clearAllEffct()
})
</script>


<style lang="less" scoped>
</style>